<template>

<RouterView></RouterView>
<HelloWorld></HelloWorld>
<canvasTest></canvasTest>
<!-- <button @click="changeFont(36)">大</button>
  <button @click="changeFont(24)">中</button>
  <button @click="changeFont(18)">小</button>
  <button @click="changetheme('light')">亮</button>
  <button @click="changetheme('dark')">暗</button> -->
</template>
<script setup lang="ts">
import  {useTestStore} from './store/index.ts'
import useImgToBase64 from "@/hooks/imgToBase64/index.ts";
import ChessBoard from "./demo/单标签实现象棋棋盘/index.vue";
import SunEat from "./demo/生化危机日食转场/index.vue";
import Login from "./demo/熊猫遮眼登陆/index.vue";
import vLazy from "./directives/imgLazyDirective";
import { Directive, ref } from "vue";
import Layout from "./layout/index.vue";
import DynamicComponents from "./demo/动态组件切换/index.vue";
import canvasTest from "./demo/canvas实现屏幕截图/index.vue";
import HelloWorld from "./components/HelloWorld.vue";
import useCssVars  from "@/hooks/cssVar/index.ts";
import {prettyLog} from './utils/prettyLog';
const log = prettyLog();
log.info('Welcome to Pretty Log!', 'This is a custom info message.');
log.error('Oops!', 'An error occurred.');
log.warning('Warning!', 'This is a warning message.');
log.success('Task Completed', 'The task was successfully completed.');

const data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

log.table(data); 
log.picture('/src/assets/images/1.jpeg')
//glob 获取图片 是懒加载的模式  eager 立即加载
//glob类似于
// let module ={
//   'xxxx':()=> import('xxxx')
// }
//globEager 类似于
//import xx from 'xxxx'
// let imageList: Record<string, { default: string }> = import.meta.glob(
//   "./assets/images/*.*",
//   { eager: true }
// );
// let arr = Object.values(imageList).map((item) => item.default);
// console.log(arr);


// useImgToBase64({
//   el:'#img'
// }).then((res) =>{
//   console.log(res.base64Url);
// })
// const Test =useTestStore()
// const changeFont = (size: string) => {
//   const oldsize=useCssVars("--size")
//   console.log('oldsize',document.documentElement.style.getPropertyValue("--size"))
//   console.log('oldsize',oldsize)
//   oldsize.value=size+"px"
// document.documentElement.style.setProperty("--size",size+"px")
  
// }
// const changePinia=()=>{
//   Test.$patch((state)=>{
//       state.age=state.age+1
//       state.name="pinia"
//       state.sex='男'
//     })
// }
const changeFont = (size:any) => {
  const oldsize=useCssVars("--size")
  console.log('oldsize',document.documentElement.style.getPropertyValue("--size"))
  console.log('oldsize',oldsize)
  oldsize.value=size
 document.documentElement.style.setProperty("--size",size+"px")
  
}
const changetheme=(theme:string)=>{
  document.documentElement.setAttribute('theme', theme);
}
</script>

<style lang="scss">

#app {
  @include bfc;

}



</style>
